<template>
  <div id="app">
<!--    <img alt="Vue logo" src="./assets/logo.png">-->
<!--    <HelloWorld msg="Welcome to Your Vue.js App"/>-->
<!--    <demo01></demo01>-->
<!--    <h1>测试首页是暂时的组件：App.vue</h1>-->
    <hr>
    <h3>导航条例</h3>
<!--    <a href="#/father">father</a>-->
<!--    <a href="#/son">son</a>-->
    <router-link to="/father">father</router-link>
    <br>
    <router-link to="/son">son</router-link>
    <br>
    <router-link to="/father2">father2</router-link>
      <br>
    <router-link to="/brother2">兄弟2</router-link>


    <!--    类似占位符，可以将路由的组件指定区域进行展示-->
    <router-view></router-view>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import demo01 from "@/components/demo01";

export default {
  name: 'App',
  components: {
    HelloWorld,demo01
  }
}
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
